<template>
  <view class="inventory-container">
    <!-- 顶部标签栏 -->
    <view class="top-nav">
      <view 
        :class="['nav-item', activeTab === 'inventory' ? 'active' : '']"
        @click="switchTab('inventory')">
        我的库存
      </view>
      <view 
        :class="['nav-item', activeTab === 'sell' ? 'active' : '']"
        @click="switchTab('sell')">
        快速出售
      </view>
    </view>
    
    <!-- 我的库存页面 -->
    <view v-if="activeTab === 'inventory'">
      <!-- 搜索区域 -->
      <view class="search-section">
        <view class="search-box">
          <uni-icons type="search" size="18" color="#999" />
          <input 
            type="text" 
            placeholder="搜索家具名称或材质..." 
            v-model="searchKeyword"
            @confirm="loadData"
          />
        </view>
        <view class="filter-btn" @click="showFilter = true">
          <uni-icons type="funnel" size="20" color="#8B4513" />
        </view>
      </view>
      
      <!-- 库存统计 -->
      <view class="stats-section">
        <view class="stat-item">
          <text class="stat-value">{{ totalItems }}</text>
          <text class="stat-label">商品总数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ totalStock }}</text>
          <text class="stat-label">库存总量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ lowStockCount }}</text>
          <text class="stat-label">低库存商品</text>
        </view>
      </view>
      
      <!-- 商品列表 -->
      <inventory-list ref="inventoryList" />
    </view>
    
    <!-- 快速出售页面 -->
    <view v-if="activeTab === 'sell'">
      <quick-sell />
    </view>
    
    <!-- 添加商品按钮 -->
    <view class="add-btn-container">
      <button class="add-btn" @click="navToAdd">
        <uni-icons type="plus" size="20" color="white" />
        添加商品
      </button>
    </view>
  </view>
</template>

<script>
import InventoryList from './list.vue';
import QuickSell from './quick-sell.vue';

export default {
  components: {
    InventoryList,
    QuickSell
  },
  data() {
    return {
      activeTab: 'inventory',
      searchKeyword: '',
      totalItems: 0,
      totalStock: 0,
      lowStockCount: 0
    };
  },
  onLoad() {
    this.loadStats();
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    navToAdd() {
      uni.navigateTo({
        url: '/pages/inventory/add'
      });
    },
    
    async loadStats() {
      try {
        const db = uniCloud.database();
        
        // 获取商品总数
        const countRes = await db.collection('furniture_inventory').count();
        this.totalItems = countRes.result.total;
        
        // 获取库存总量
        const stockRes = await db.collection('furniture_inventory')
          .aggregate()
          .group({
            _id: null,
            totalStock: $.sum('$stock')
          })
          .end();
        
        this.totalStock = stockRes.result.data[0]?.totalStock || 0;
        
        // 获取低库存商品数量
        const lowStockRes = await db.collection('furniture_inventory')
          .where('stock < 3')
          .count();
        
        this.lowStockCount = lowStockRes.result.total;
      } catch (e) {
        console.error('加载统计数据失败', e);
      }
    }
  }
};
</script>

<style lang="scss">
.inventory-container {
  padding-bottom: 100rpx;
  
  .top-nav {
    display: flex;
    background: linear-gradient(to right, #8B4513, #A0522D);
    color: white;
    padding: 0 20rpx;
    
    .nav-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      font-size: 32rpx;
      position: relative;
      
      &.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80rpx;
        height: 6rpx;
        background: #FFD700;
        border-radius: 3rpx;
      }
    }
  }
  
  .search-section {
    display: flex;
    padding: 20rpx;
    background: white;
    align-items: center;
    
    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background: #f5f5f5;
      border-radius: 50rpx;
      padding: 0 25rpx;
      height: 70rpx;
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        padding: 0 15rpx;
      }
    }
    
    .filter-btn {
      margin-left: 20rpx;
      background: #f0e6d8;
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .stats-section {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    background: white;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        display: block;
        font-size: 42rpx;
        font-weight: bold;
        color: #8B4513;
      }
      
      .stat-label {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  
  .add-btn-container {
    position: fixed;
    bottom: 120rpx;
    right: 40rpx;
    z-index: 100;
    
    .add-btn {
      background: #8B4513;
      color: white;
      border-radius: 50%;
      width: 120rpx;
      height: 120rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 20rpx rgba(139, 69, 19, 0.3);
      
      .uni-icons {
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>